<template>
	<TabGrayEasyCard title="欠款分析" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab" :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''" :unitText="``" :updateText="card.updateText" v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
		<slot>
			<el-table :data="card.tableData" height="100%" class="zs-table-first-row-special">
				<el-table-column label="区域" min-width="60" align="left" show-overflow-tooltip>
					<template #default="scope">
						<span v-if="scope.$index == 0">合计</span>
						<span v-else>{{ scope.row.communityName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="buildName" label="楼栋" :align="'center'" min-width="60" />
				<el-table-column prop="formatYingshou" label="应收" :align="'center'" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="formatShishou" label="实收" :align="'center'" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="formatQiankaun" label="欠款" :align="'center'" :formatter="defaultTableData" show-overflow-tooltip />
				<el-table-column prop="formatRate" label="收缴率" :align="'center'" :formatter="defaultTableData" show-overflow-tooltip />
			</el-table>
		</slot>
	</TabGrayEasyCard>
</template>

<script setup>
	import { defaultTableData } from '@/utils/publicUtils';
	import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard';
	import { toThousands } from '@/utils/number-util';
	import dashBoardApi from '@/api/Property/dashBoard';
	import { reactive, watch } from 'vue';
	import { reportLog } from '@/utils/reportLog';
	import { useRouter, useRoute } from 'vue-router';
	const router = useRouter();
	const route = useRoute().query;

	const props = defineProps({
		permi: {
			type: String,
			default: '',
		},
		projectCode: {
			type: String,
			default: '',
		},
		updateDate: {
			type: String,
			default: '',
		},
	});

	const card = reactive({
		tabs: [
			{ label: '全部', value: 'qb' },
			{ label: '当期', value: 'dq' },
			{ label: '全年', value: 'qn' },
			{ label: '历史', value: 'ls' },
		],
		curTab: 'qb',
		tabRight: '',
		grayCardList: [
			{ label: '欠款金额', value: '', unit: '万', color: '' },
			{ label: '收缴率', value: '', unit: '%', color: '' },
		],
		updateText: '',
		tableData: [],
	});

	const getCardData = async () => {
		let res = await dashBoardApi.debtAnalyseCardApi({ projectCode: props.projectCode, typeCode: card.curTab });
		if (res.data.errorCode != 200) return;
		if (res.data.data && res.data.data.length > 0) {
			card.tabRight = res.data.data[0].communityId;
			card.grayCardList[0].value = toThousands(res.data.data[0].buildName);
			card.grayCardList[1].value = res.data.data[0].collectRate;
			res.data.data[0].buildName = '';
			res.data.data.forEach(item => {
				item.formatYingshou = toThousands(item.shouldAm);
				item.formatShishou = toThousands(item.receivedAm);
				item.formatQiankaun = toThousands(item.arrearsAm);
				item.formatRate = item.collectRate ? item.collectRate + '%' : '-';
			});
		}
		card.tableData = res.data.data || [];
	};

	const changeTab = value => {
		console.log(value);
		card.curTab = value;
		getCardData();
	};

	const goDetail = permi => {
		reportLog({
			type: 4,
			resourceKey: permi,
		});
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'Property_DashBoard_DebtAnalyse_Debtinfo',
				rTitle: '欠款明细',
				menuKey: route.menuKey,
				pageKey: route.pageKey,
				projectCode: props.projectCode,
			},
		});
	};

	watch(
		() => props.projectCode,
		() => {
			getCardData();
		},
		{ immediate: true },
	);
</script>
